<template>
  <div>
    <FormNavbar
      :title="navbar_title"
      :buttons="buttons"
      :hasActive="hasActive"
      :editable="editable"
      :record="record"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <OToolbar
      :editable="editable"
      :current-state="current_state"
      :states="header_statusbar_visible"
      :buttons="header_buttons"
      @button-clicked="handleBtnClicked"
    />
    <a-divider />
    <div>
      <div>销售订单: {{ record.sale_order_id }}</div>
      <div>NC类型: {{ record.biz_type }}</div>
      <div>NC状态: {{ record.api_status }}</div>
      <div>创建时间: {{ record.create_date }}</div>
      <div>NC发票PK: {{ record.client_order_ref }}</div>
      <div>NC发票号: {{ record.invoice_num }}</div>
      <div>公司代码: {{ record.company_code }}</div>
      <div>公司名称: {{ record.company_name }}</div>
      <div>状态: {{ record.state }}</div>
    </div>

    <a-divider />

    <div
      v-if="
        !editable &&
        record.biz_type === 'sale' &&
        record.api_status === 'confirm' &&
        record.state === 'confirmed'
      "
    >
      <a-button @click="create_sale_order" class="createBtn"> 创建订单 </a-button>
      <WizardForm
        :visible.sync="wizardVisible"
        :action="wizardAction"
        :actionIds="[res_id]"
        @done="handleDone"
      />
    </div>

    <a-form-model
      ref="refForm"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formValues"
      :rules="rules_edit"
      class="formNewStyle"
    >
      <template v-for="meta in fields">
        <template v-if="invisible_get(meta)">
          <!-- invisible: {{ meta.name }}: {{ record[meta.name] }} -->
        </template>
        <template
          v-else-if="
            [
              'sale_order_id',
              'create_date',
              'biz_type',
              'api_status',
              'client_order_ref',
              'invoice_num',
              'company_code',
              'company_name',
              'state',
              'line_ids'
            ].includes(meta.name)
          "
        >
        </template>
        <template v-else>
          <FormField
            :key="meta.name"
            :field-name="meta.name"
            ref="refField"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />
        </template>
      </template>

      <a-form-model-item
        :label="meta_get('line_ids').string"
        :prop="meta_get('line_ids').name"
      >
        <LineIds
          width="120px"
          ref="refRelation_line_ids"
          v-model="formValues.line_ids"
          :editable="editable && !meta_get('line_ids').readonly"
          :field-info="{ ...meta_get('line_ids') }"
          :view-info="viewInfo"
          :data-info="dataInfo"
          @change="handleChange"
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import formMixin from '@/odooui/formMixin'
import FormNavbar from '@/components/ONavbar/formNavbar.vue'
import OToolbar from '@/components/OToolbar/index.vue'

import FormField from '@/components/OView/FormField.vue'

import LineIds from './ods_line_ids.vue'

import WizardForm from '@/components/OView/WizardForm.vue'

export default {
  name: 'FormView',
  components: { FormNavbar, OToolbar, FormField, LineIds, WizardForm },

  mixins: [formMixin],

  props: {},

  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },

      wizardVisible: false,
      wizardAction: undefined
    }
  },
  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {
    create_sale_order() {
      const actionId = 'fp_sale.action_ods_to_sale_order'
      // const res_id = this.res_id
      // console.log('create_sale_order', actionId, res_id)
      this.wizardAction = actionId
      this.wizardVisible = true
    },
    onClickLeft() {
      if (this.editable) {
        this.onClickCancel()
      } else {
        this.onClickBack()
      }
    },

    onClickRight(btn) {
      const btn_fns = {
        save: 'onClickSave',
        edit: 'onClickEdit',
        new: 'onClickNew',
        del: 'onClickDel',
        unlink: 'onClickDel',
        copy: 'handleOnCopy',
        archive: 'handleOnArchive',
        unarchive: 'handleOnUnarchive'
      }

      this[btn_fns[btn]]()
    },

    handleDone() {
      this.load_data(this.res_id)
    }
  }
}
</script>

<style scoped type="text/css">
  .createBtn {
    margin-left: 10px;
  }
  .formNewStyle {
    /* display: flex; */
    background: white;
    /* flex-wrap: wrap; */
    padding: 10px;
    margin-top: 10px;
  }
  /deep/.formNewStyle .ant-form-item {
    margin-bottom: 5px;
    width: 400px;
  }
</style>
